<!-- 分类 -->
 <template>
    <el-card>
        <el-form :inline="true">
            <el-form-item label="一级分类" >
                <el-select style="width: 240px" v-model="useCategory.c1Id" @change="changeC1" :disabled="scene == 1 ? true : false">
                    <el-option v-for="c1 in useCategory.c1Arr" :key="c1.id" :label="c1.name"
                        :value="c1.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类" >
                <el-select style="width: 240px" v-model="useCategory.c2Id" @change="changeC2" :disabled="scene == 1 ? true : false">
                    <el-option v-for="c2 in useCategory.c2Arr" :key="c2.id" :label="c2.name"
                        :value="c2.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select style="width: 240px" v-model="useCategory.c3Id" :disabled="scene == 1 ? true : false">
                     <el-option v-for="c3 in useCategory.c3Arr" :key="c3.id" :label="c3.name"
                        :value="c3.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>
 
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import useCategoryStore from '@/store/modules/category'
 const useCategory = useCategoryStore()

 //接收父组件传值
 defineProps(['scene'])
 //一级分类
 const getC1Arr = async()=>{
    useCategory.getC1()
 }
  onMounted(()=>{
    getC1Arr()
 })
 //changeC1
 const changeC1 = async ()=>{
    //一级变化清空二级和三级
    useCategory.c2Id = ''
    useCategory.c2Arr = []
    useCategory.c3Id = ''
    useCategory.c3Arr = []
    await useCategory.getC2()
 }

 const changeC2 = ()=>{
     //二级变化清空三级
    useCategory.c3Id = ''
    useCategory.c3Arr = []
    useCategory.getC3()
 }
 </script>
 
 <style scoped>
 </style>
 